let button = document.querySelector('.ripple');

button.addEventListener('click', function (e) {
  console.log(e.target);
  // 点击的坐标(x, y);
  const x = e.pageX;
  const y = e.pageY;
  console.log('点击', x, y);
  // 按钮坐标
  const buttonTop = e.target.offsetTop;
  const buttonLeft = e.target.offsetLeft;
  // 圆的具体坐标 = 点击坐标 - 按钮坐标
  const offsetx = x - buttonLeft;
  const offsety = y - buttonTop;
  console.log('按钮：', buttonLeft, buttonTop);

  const circle = document.createElement('span');
  circle.classList.add('circle');
  circle.style.top = offsety + 'px';
  circle.style.left = offsetx + 'px';
  console.log('圆：', circle.style.left, circle.style.top);
  // 添加进入
  this.appendChild(circle);
  // 清除
  setTimeout(() => circle.remove(), 500);
})